<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <title></title>
    <link rel="stylesheet" type="text/css" href="../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../css/common.css" />    
    <style>     
     /* 头部样式 */
     .topbar {background: #3A8B7A; height:50px; }
     #title { color:#FFF;} 
     .swipe {line-height: 50px;margin-right: 10px;color: #FF8400;}
     .back {float: left; padding-right: 30px;}
     .back img {height: 30px;margin-top: 10px;margin-left: 10px;}
     .topbar .title {line-height: 50px; font-size: 22px; position: absolute; left: 50%; -webkit-transform: translateX(-50%);transform: translateX(-50%);}
     .right {float: right; padding-left: 30px;}
     .right img {height: 30px;margin-top: 10px;margin-right: 10px;margin-bottom: 10px;}  
     
     #wrapper {
            position: relative;
            z-index: 1;
            height: 35px;
            width: 100%; 
            padding-top:1px;
			border-bottom: 1px solid #E5E5E5;
        }

        #scroller {
            position: absolute;
            z-index: 1;
            -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
            width: 200%;
            -webkit-transform: translateZ(0);
            transform: translateZ(0);
            -webkit-touch-callout: none;
            -webkit-user-select: none;
            -webkit-text-size-adjust: none;  
            border-top: 1px solid #E5E5E5;
        }

        #scroller ul {
            list-style: none;
            padding: 0;
            margin: 0;
            display: -webkit-box;
            
        }

        #scroller li {
            width: 25%;
            line-height: 35px;
            font-size: 16px;
            overflow: hidden;
            text-align: center;
        }

        /*
            iscroll
        */
        .nav_active {
            color: #a20909;
            font-size: 18px !important;
            border-bottom: 2px solid #a20909;
        }

        nav {
            width: 100%;
            display: -webkit-box; 
            background-color: #ECECEC;
        }

        .arrow_down {
            display: block;
            background-size: 15px;
            background-repeat: no-repeat;
            background-position: center;
            padding: 15px;
            background-image: url('../image/channel_nav_arrow@2x.png');
            -webkit-box-flex: 1;
            -webkit-transform: rotate(90deg);
            -webkit-transition: All .5s ease;
        }

        .arrow_up {
            /*-webkit-transform: rotate(0deg);
            -webkit-transition: All .5s ease;*/
        } 
    </style>
  </head>
<body>
	<div id="wrap">   
       	<nav>
		    <div id="wrapper">
		        <div id="scroller">
		            <ul>   
		            </ul>
		        </div>
		    </div> 
		    <!--<div class="arrow_down" tapmode=""></div>-->
		</nav>  
	</div>
</body>
<script type="text/javascript" src="../script/api.js"></script>  
<script type="text/javascript" src="../script/alpenlicebe.js"></script>   
<script type="text/javascript" src="../script/zepto.min.js"></script>  
<script type="text/javascript" src="../script/hashes.min.js"></script> 
<script type="text/javascript" src="../script/iscroll.js"></script>    
<script type="text/javascript"> 
    apiready = function(){      
		goto_getMenuFun();
    } 
    
    var myScroll= false;
    function goto_getMenuFun(){
    	var infoID=api.pageParam.infoID;
		if(''==infoID||undefined==infoID||null==infoID){
    		api.alert({title:'系统提示',msg:'参数错误'});
			return;
    	}
		var topMenu=[
	  			{'cateID':'1','cateName':'最新动态'},
	  			{'cateID':'2','cateName':'交流互动'}
	  		];
		var navHtml = '', frames = [];
		for(var idx in topMenu){  
			var module = topMenu[idx];
			var cateID=module["cateID"];;
			var cateName=module["cateName"]; 
			
			var active = idx == 0 ? 'nav_active' : '', frame = {};
	   		navHtml += '<li data-index="' + idx + '" id="' + cateID+ '" class="' + active + '" tapmode="" onclick="goto_openFrameFun(this)">' + cateName + '</li>';
	    	frame.name = 'frame_' + idx;
	  		frame.url = idx == 0 ? 'hot_TrackListInfoList.html' : 'hot_TrackListInfoDis.html';
	   		frame.pageParam = {infoID:infoID,index:idx};
			frames.push(frame);
   		}  
		$("#scroller").find('ul').html(navHtml);	 
		goto_openFrameGroupFun(frames); 
		
		myScroll = new IScroll('#wrapper', {
            eventPassthrough: true,
            scrollX: true,
            scrollY: false, 
            preventDefault: false
        });  
	}
	/*初始化frame*/
	function goto_openFrameGroupFun(frames) {

		api.openFrameGroup({
            name: 'groupHotTrack',
            scrollEnabled: true,
            rect: {x: 0, y: api.pageParam.winY + $("#wrapper").height()+3, w: 'auto', h: 'auto'},
            index: 0,
            preload:0,/*不预加载*/
            frames: frames
        }, function (ret, err) {
            if (ret.index >= 4) {
                myScroll.scrollTo(-$("li").width() * (ret.index - 4), 0, 2000); 
            }
            $("#scroller").find('li').removeClass('nav_active').eq(ret.index).addClass('nav_active');
        });
    }
    
	/*打开frame*/
	function goto_openFrameFun(obj) { 
        try {
            api.setFrameGroupIndex({
                name: 'groupHotTrack',
                index: $(obj).data('index'),
                scroll: true
            });
        } catch (e) {
            api.alert({title:'系统提示',msg:'错误信息：'+e}); 
        } 
    }
</script>
</html>